<template>
	<div class="user-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="95px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="任务分组:" prop="jobGroup">
							<el-select-v2 v-model="searchForm.jobGroup" class="el-form-item" clearable filterable :options="options" placeholder="请选择任务分组" @visible-change="handleModelIdReq" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="任务名称:" prop="jobDesc">
							<el-input v-model="searchForm.jobDesc" placeholder="请输入任务名称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="负责人:" prop="author">
							<el-input v-model="searchForm.author" placeholder="请输入负责人" />
						</el-form-item>
					</el-col>

					<template v-if="!searchMore">
						<el-col :span="6">
							<el-form-item class="form-item" label="任务状态:" prop="triggerStatus">
								<el-select v-model="searchForm.triggerStatus" class="el-form-item" clearable placeholder="请选择任务状态">
									<el-option label="停止" value="0" />
									<el-option label="启动" value="1" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="调度类型:" prop="scheduleType">
								<dict-select v-model="searchForm.scheduleType" :dictKey="'schedule_type'" placeholder="请选择调度类型" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="执行器任务:" prop="executorHandler">
								<el-input v-model="searchForm.executorHandler" placeholder="请输入执行器任务" />
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item class="form-item" label="创建时间:" prop="createTimeAry">
								<el-date-picker v-model="createTimeAry" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="el-form-item" end-placeholder="截止日期" range-separator="至" start-placeholder="开始日期" type="daterange" />
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<a class="more-search" @click="searchMore = searchMore ? false : true">
								{{ searchMore ? '展开' : '收起' }}
								<el-icon>
									<component :is="searchMore ? 'ele-ArrowDown' : 'ele-ArrowUp'" color="#0052CC" />
								</el-icon>
							</a>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!--查询表格-->
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" :loading="loading">
				<template #vux-search>
					<el-row :gutter="12" class="mb10">
						<el-button class="ml8" type="primary" v-has="'system:timeTask:add'" @click="handleAdd">
							<el-icon><ele-Plus /></el-icon>
							&nbsp;新增
						</el-button>
						<el-button @click="handleTaskLog('')" v-has="'system:timeTask:log'">执行日志</el-button>
					</el-row>
				</template>
				<template #vux-column>
					<vxe-column field="id" min-width="100" show-overflow="tooltip" title="任务ID" />
					<vxe-column field="jobDesc" min-width="150" show-overflow="tooltip" title="任务名称" />
					<vxe-column field="scheduleType" min-width="150" title="任务调度类型" />
					<vxe-column field="author" min-width="120" title="负责人" />
					<vxe-column field="childJobid" min-width="120" title="子任务ID" />
					<vxe-column field="triggerStatus" min-width="120" title="状态">
						<template #default="{ row }">
							<span>{{ row.triggerStatus == '1' ? '启动' : '停止' }}</span>
							<el-switch v-has="'system:timeTask:update'" active-color="#19be6b" inactive-color="#ed4014" :model-value="row.triggerStatus == '1' ? true : false" style="margin-left: 10px" @change="handleSwitch(row)" />
						</template>
					</vxe-column>
					<vxe-column field="triggerLastTime" min-width="150" title="上次调度时间" />
					<vxe-column field="triggerNextTime" min-width="150" title="下次调度时间" />
					<vxe-column field="addTime" min-width="150" title="创建时间" />
					<vxe-column field="updateTime" min-width="150" title="更新时间" />
					<vxe-column field="operation" fixed="right" min-width="150" title="操作">
						<template #default="{ row }">
							<div class="vxe-action">
								<a @click="handleStart(row)">执行一次</a>
								<el-dropdown class="mt5 ml10">
									<span class="el-dropdown-link">
										更多
										<i class="alifont ali-pk-down-arrow" style="color: #0052cc; font-size: 12px" />
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<div v-has="'system:timeTask:update'" @click="handleUpdate(row)"><el-dropdown-item>编辑</el-dropdown-item></div>
											<div v-has="'system:timeTask:delete'" @click="handleDelete(row)"><el-dropdown-item>删除</el-dropdown-item></div>
											<div v-has="'system:timeTask:log'" @click="handleTaskLog(row.id)"><el-dropdown-item>日志</el-dropdown-item></div>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</vxe-column>
				</template>
			</static-table>
			<el-pagination background :current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
		<EditTimeTaskModal ref="editTimeTaskModalRef" @peak-modal-ok="handleModalOk" />
	</div>
</template>
<script name="timeTaskManage" setup>
import global from '@/utils/global'
import useTableList from '@/hooks/useTableList'
const EditTimeTaskModal = defineAsyncComponent(() => import('./leafPages/EditTimeTaskModal.vue'))

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-11 18:26:02
 */
const router = useRouter()
const state = reactive({
	searchForm: {
		jobDesc: '',
		author: '',
		triggerStatus: '',
		jobGroup: null,
		scheduleType: '',
		executorHandler: '',
	},
	createTimeAry: [],
	editTimeTaskModalRef: null,
	searchFormRef: null,
	options: [],
})
const { searchForm, createTimeAry, searchFormRef, editTimeTaskModalRef, options } = toRefs(state)

const queryUrl = '/meta-system/web/v1/job/list'
const { loading, dataCount, searchMore, handleInitQuery, getTimeParseAry, handleModalOk, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm)

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-11 18:26:25
 */
const handleSearch = () => {
	const { addBeginTime, addEndTime } = getTimeParseAry(state.createTimeAry, 'addBeginTime', 'addEndTime')
	state.searchForm.addBeginTime = addBeginTime
	state.searchForm.addEndTime = addEndTime
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	state.createTimeAry = []
	handleSearch()
}
const handleAdd = () => {
	router.push({
		path: '/system/timeTask/timeTaskAdd',
	})
}
const handleUpdate = row => {
	router.push({
		path: '/system/timeTask/timeTaskUpdate',
		query: {
			id: row.id,
		},
	})
}
const handleTaskLog = id => {
	const taskId = id ? id : ''
	router.push({
		path: '/system/timeTask/taskLogManage',
		query: {
			id: taskId,
		},
	})
}
const handleModelIdReq = e => {
	if (e && state.options.length == 0) {
		global.$fetchGetData('/meta-system/web/v1/job/getJobsByGroup', {}).then(data => {
			if (data.code == 200) {
				state.options = data.data
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleStart = row => {
	state.editTimeTaskModalRef.handleShowModal(row)
}
//switch 切换
const handleSwitch = row => {
	global.$baseConfirm('是否确认启动/停止名称为"--【' + row.jobDesc + '】--"的数据?', '提示', () => {
		let url = '/meta-system/web/v1/job/start'
		if (row.triggerStatus == '1') {
			url = '/meta-system/web/v1/job/stop'
		}
		global.$fetchGetData(url, { jobId: row.id }).then(data => {
			if (data.code == 200) {
				global.$baseMessage('更改成功！', 'success')
				handleModalOk(2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
const handleDelete = row => {
	global.$baseConfirm(
		'是否确认删除任务名称为"--【' + row.jobDesc + '】--"的数据?',
		'提示',
		() => {
			global.$fetchGetData('/meta-system/web/v1/job/delJob', { jobId: row.id }).then(data => {
				if (data.code == 200) {
					global.$baseMessage('删除成功！', 'success')
					handleModalOk(2)
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
</script>
<style lang="scss" scoped></style>
